<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <form class="cil__base-block--form" [formGroup]="validateForm" nz-form>
    <app-detail-header
      [title]="'终端功能'"
      [ifEditable]="false"
    ></app-detail-header>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>开通固定金额收款码</nz-form-label>
          <div nz-row nzType="flex" nzAlign="middle" nzJustify="space-between">
            <div nz-col [nzSpan]="10">
              <nz-form-control>
                <nz-switch [(ngModel)]="isAmountFixed" [ngModelOptions]="{standalone: true}" (ngModelChange)="switchAmountFixed($event)"></nz-switch>
              </nz-form-control>
            </div>

            <div *ngIf="isAmountFixed" nz-col [nzSpan]="10">
              <input formControlName="fixedAmt" name="fixedAmt" nz-input />
              <nz-form-explain>
                <ng-container *ngTemplateOutlet="errorTpl;context:{control: validateForm.get('fixedAmt'), name:'fixedAmt'}"></ng-container>
              </nz-form-explain>
            </div>
          </div>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>

<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('maxlength'); else third">{{ errorTips[name]?.maxlength }}</ng-container>
    </ng-template>
    <ng-template #third>
      <ng-container *ngIf="control.hasError('minlength'); else fourth">{{ errorTips[name]?.minlength }}</ng-container>
    </ng-template>
    <ng-template #fourth>
      <ng-container *ngIf="control.hasError('min'); else fifth">{{ errorTips[name]?.min }}</ng-container>
    </ng-template>
    <ng-template #fifth>
      <ng-container *ngIf="control.hasError('max'); else sixth">{{ errorTips[name]?.max }}</ng-container>
    </ng-template>
    <ng-template #sixth>
      <ng-container *ngIf="control.hasError('pattern')">{{ errorTips[name]?.pattern }}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>